<template>
  <div id="gameInfo">
    <div id="gameBanner">
       <img class="gameImg" :src="gameInfo[0].gameImg" alt="" >
      <div id="gameId">
          <h1 class="gameInfoTitle darkFont">{{gameInfo[0].gameName}}</h1>
          <div id="gameInfo-fol" class="fontsize-18">
            <p class="darkFont"><span id="gameFollower" style="font-weight: 900">{{gameInfo[0].gameFollower}}</span>&nbsp;名关注者</p><div class="dot">•</div>
            <span class="labInfo" style="background-color: #9e5bdf;"><router-link to="/home/game" style="color: white">游戏</router-link></span><span class="labInfo" v-for="lab in (gameInfo[0].gameTags || ' ').split(' ')" :key="lab.id">{{lab}}</span>
          </div>
          <button class="button buttonInInfo flex --oneLine line-center buttonGame" @click="followGame" v-if="!followed">
            关注这个圈子
          </button>
        <button class="button buttonInInfo flex --oneLine line-center buttonGame gameClicked" @click="followGame"  v-else>
          已关注
        </button>
        </div>
    </div>
    <game-menu/>
    <keep-alive>
      <router-view :pushGameId="gameInfo[0].gameId" />
    </keep-alive>
  </div>
</template>

<script>
  import gameMenu from '../../functional unit/gameMenu'
  import api from "../../../model/api";
  import $ from 'jquery';

  export default {
    name: 'gameInfo',
    data(){
      return {
        // gameName: '赛博朋克2077',
        // game:[{gameId:'1',gameName:'赛博朋克2077',gameGen:['开放世界','第一人称射击',]},{gameId:'2',gameName:'赛博朋克2077',gameGen:['开放世界','第一人称射击',]},{gameId:'3',gameName:'赛博朋克2077',gameGen:['开放世界','第一人称射击',]},{gameId:'4',gameName:'赛博朋克2077',gameGen:['开放世界','第一人称射击',]},{gameId:'5',gameName:'赛博朋克2077',gameGen:['开放世界','第一人称射击',]},{gameId:'6',gameName:'赛博朋克2077',gameGen:['开放世界','第一人称射击',]},{gameId:'7',gameName:'赛博朋克2077',gameGen:['开放世界','第一人称射击',]},
        // ]
        gameInfo: [{
            gameName: '',
            gameId: '',
            gameNameEn: '',
            gameGen: '',
            gameImg: '',
            gameFollower: '',
        }],
        followed: false,
        loginState: false,
      }
    },
    components:{
      gameMenu,
    },

    methods:{
      async addGameViewNum(){
        const _gameId = this.gameInfo[0].gameId
        const {data:res} = await this.$axios.post('v1/gameViewNum',{gameId: _gameId})
        if(res.code === 200){
          return true
        }
      },
      getGameInfo() {
        api.getGames().then(res => {
          let id = this.$route.params.id
          let gameList = res.data
          this.gameInfo = gameList.filter(function (Obj) {
            if( Obj.gameNameEn === id){
                if(Obj.gameFollower >= 1000){
                   Obj.gameFollower = Obj.gameFollower/1000 + 'k'
                  return Obj
                }else{
                  return Obj
                }
            }
          })
          this.addGameViewNum()
        })
      },
      async followGame(){
          if(this.loginState === true){
            const followArr = {
              userId: JSON.parse(sessionStorage.user).userId,
              gameId: this.gameInfo[0].gameId
            }
            if(this.followed === false){
              const {data:res} = await this.$axios.post("v1/followGame",followArr)
              if(res.code === 200){
                this.$message.success("关注圈子成功！")
                this.followed = true
                this.gameInfo[0].gameFollower++
              }else{
                this.$message.error("关注圈子失败！请检查网络连接。")
              }
            }else if(this.followed === true){
              const {data:res} = await this.$axios.post("v1/unfollowGame",followArr)
              if(res.code === 200){
                this.$message.success("取消成功")
                this.followed = false
                this.gameInfo[0].gameFollower--
              }else{
                this.$message.error("取消圈子失败！请检查网络连接。")
              }
            }
          }else{
            this.$message.error("请先登陆")
          }
      },
      async followState(){
            const followArr = {
              userId: JSON.parse(sessionStorage.user).userId,
              gameId: this.gameInfo[0].gameId
            }
            const {data:res} = await this.$axios.post('v1/judgeGameFollow',followArr)
            if(res.code === 200){
              this.followed = true
            }
            if(res.code === 500){
              this.followed = false
            }
      },
      isLogin(){
        if(sessionStorage.token){
          this.followState()
          this.loginState = true
        }
      }

    },
    created(){
      this.getGameInfo()
    },
    beforeUpdate() {
      this.isLogin()
    },


    // computed: {
    //   gameName(){
    //     return this.$route.params.gameName
    //   },
    //   gameId(){
    //     return this.$route.params.gameId
    //   },
    // },
  }

</script>

<style lang="less" scoped>

  #gameInfo{
    width: 100%;
    margin: 30px;
    #gameBanner{
      letter-spacing: 2px;
      width: 100%;
      display: flex;
      /*align-items: center;*/

    }
    h2{
      font-size: 60px;
    }
    #gameInfo-fol{
      display: flex;
      align-items: center;
      /*background-color: red;*/
    }
    .gameImg{
      width: 140px;
      height: 193px;
      border-radius: 6px;
      margin-right: 30px;
      z-index: +1;
      /*box-shadow: -5px 5px 0 #ce52ff;*/
    }
    #gameId{
      position: relative;
    }
   button{
     width: 170px;
     position: absolute;
     bottom: 0;
   }
    .buttonGame{
      background-color: #9e5bdf;
      color: white;
      transition: all 0.1s ease-in-out;
      font-weight: 300;
    }
    .buttonGame:hover{
      opacity: 0.8;
    }
    .gameClicked{
      background-color: #9e5bdf;
      color: rgba(255, 255, 255, 0.50);
    }

  }
</style>
